<template>
  <div>
    <h1 style="font-size:18px;">Tree 树形控件</h1>
    <p>用清晰的层级结构展示信息，可展开或折叠。</p>
    <h2>基础用法</h2>
    <div class="test-tree">
      <Tree v-model="defaultNode"
        ref="tree"
        draggable
        showCheckbox
        :treeData="treeData"
        :search="searchVal"
        @on-drop="dropNode"
        @on-selected-change="clickNode"
        @on-checked-change="clickCheckbox" />
    </div>
    <p>最基本的用法，展示可勾选，可选中，禁用，可拖拽，默认展开等功能。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Tree v-model=&quot;defaultNode&quot;
        ref=&quot;tree&quot;
        draggable
        showCheckbox
        :treeData=&quot;treeData&quot;
        :search=&quot;searchVal&quot;
        @on-drop=&quot;dropNode&quot;
        @on-selected-change=&quot;clickNode&quot;
        @on-checked-change=&quot;clickCheckbox&quot; /&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            defaultNode: '',
            searchVal: '',
            treeData: [
              {
                name: '一级 1',
                id: '1',
                children: [
                  {
                    name: '二级 1-1',
                    id: '2',
                    children: [
                      {
                        name: '三级 1-1-1',
                        id: '3',
                        children: [
                          {
                            name: '四级 1-1-1-1',
                            id: '4',
                            children: [],
                            checked: true,
                            disabled: true
                          },
                          {
                            name: '四级 1-1-1-2',
                            id: '5',
                            children: [],
                            checked: false
                          }
                        ]
                      }
                    ]
                  },
                  {
                    name: '二级 1-2',
                    id: '8',
                    children: [
                              {
                        name: '三级 1-2-1',
                        id: '9',
                        children: [
                          {
                            name: '四级 1-2-1-1',
                            id: '10',
                            children: []
                          }
                        ]
                      }
                    ]
                  }
                ]
              },
              {
                name: '一级 2',
                id: '11',
                children: [
                  {
                    name: '二级 2-1',
                    id: '12',
                    children: [
                      {
                        name: '三级 2-1-1',
                        id: '13',
                        children: [
                          {
                            name: '四级 2-1-1-1',
                            id: '14',
                            children: []
                          }
                        ]
                      }
                    ]
                  },
                  {
                    name: '二级 2-2',
                    id: '15',
                    children: [
                              {
                        name: '三级 2-2-1',
                        id: '16',
                        children: [
                          {
                            name: '四级 2-2-1-1',
                            id: '17',
                            children: []
                          }
                        ]
                      }
                    ]
                  }
                ]
              }
            ]
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>自定义用法</h2>
    <div>
      <Tree v-model="defaultNode"
        :treeData="treeData"
        :search="searchVal"
        showCheckbox
        @on-select-change="clickNode"
        @on-check-change="clickCheckbox">
        <template v-slot="{ node }">
          <span>{{node.name}}</span>
        </template>
      </Tree>
      <p>在实际业务中，当后端返回的数据中字段名不是name,那我们在页面渲染 <code>tree</code> 组件时可以使用自定义方法。</p>
      <p>代码示例：</p>
      <pre>
        &lt;template&gt;
          &lt;div class=&quot;test-tree&quot;&gt;
            &lt;Tree v-model=&quot;defaultNode&quot;
              :treeData=&quot;treeData&quot;
              :search=&quot;searchVal&quot;
              :show-checkbox=&quot;true&quot;
              @on-select-change=&quot;clickNode&quot;
              @on-check-change=&quot;clickCheckbox&quot;&gt;
              &lt;template v-slot=&quot;{node}&quot;&gt;
                &lt;span&gt;{node.text}&lt;/span&gt;
              &lt;/template&gt;
            &lt;/Tree&gt;
          &lt;/div&gt;
        &lt;/template&gt;
      </pre>
    </div>
    <br>
    <br>
    <h2 style="font-size:16px;">API</h2>
    <br>
    <p>Tree props</p>
    <br>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <br>
    <p>Tree events</p>
    <br>
    <Table :columns="tableColumn1" :data="tableData1"></Table>
  </div>

</template>

<script>
export default {
  name: 'TestTree',
  data () {
    return {
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain',
          width: 350
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableColumn1: [
        {
          title: '事件名',
          key: 'event'
        },
        {
          title: '说明',
          key: 'type'
        },
        {
          title: '返回值',
          key: 'callback'
        }
      ],
      tableData: [
        {
          attribute: 'treeData',
          explain: '可嵌套的节点属性的数组，生成 tree 的数据',
          type: 'Array',
          default: '[ ]'
        },
        {
          attribute: 'showCheckbox',
          explain: '是否支持选中',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'searchVal',
          explain: '搜索树结构，搜索结果平级展示',
          type: 'String | Number',
          default: '-'
        },
        {
          attribute: 'draggable',
          explain: '是否允许拖拽',
          type: 'Boolean',
          default: 'false'
        }
      ],
      tableData1: [
        {
          event: 'on-select-change',
          type: '节点点击响应事件',
          callback: 'params: [node: 当前节点信息]'
        },
        {
          event: 'dragover.prevent.stop && drop.prevent.stop',
          type: '节点拖拽响应事件',
          callback: 'params: [object: 当前节点信息]'
        },
        {
          event: 'on-checkbox-change',
          type: '节点选中状态事件',
          callback: 'params: [node: 当前节点, array: 所有选中节点]'
        }
      ],
      defaultNode: '',
      searchVal: '',
      treeData: [
        {
          name: '一级 1',
          id: '1',
          children: [
            {
              name: '二级 1-1',
              id: '2',
              children: [
                {
                  name: '三级 1-1-1',
                  id: '3',
                  children: [
                    {
                      name: '四级 1-1-1-1',
                      id: '4',
                      children: [],
                      checked: true,
                      disabled: true
                    },
                    {
                      name: '四级 1-1-1-2',
                      id: '5',
                      children: [],
                      checked: false
                    }
                  ]
                }
              ]
            },
            {
              name: '二级 1-2',
              id: '8',
              children: [
                {
                  name: '三级 1-2-1',
                  id: '9',
                  children: [
                    {
                      name: '四级 1-2-1-1',
                      id: '10',
                      children: []
                    }
                  ]
                }
              ]
            }
          ]
        },
        {
          name: '一级 2',
          id: '11',
          children: [
            {
              name: '二级 2-1',
              id: '12',
              children: [
                {
                  name: '三级 2-1-1',
                  id: '13',
                  children: [
                    {
                      name: '四级 2-1-1-1',
                      id: '14',
                      children: []
                    }
                  ]
                }
              ]
            },
            {
              name: '二级 2-2',
              id: '15',
              children: [
                {
                  name: '三级 2-2-1',
                  id: '16',
                  children: [
                    {
                      name: '四级 2-2-1-1',
                      id: '17',
                      children: []
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    clickNode (node) {
      // console.log('clickNode', node)
    },
    clickCheckbox ({ node, selectedData }) {
      console.log('clickCheckbox', node, selectedData)
    },
    dropNode ({ index, parentNode, targetNode, callback }) {
      // console.log('dropNode', index, parentNode, targetNode, callback)
      callback(index, targetNode)
    }
  }
}
</script>
<style scoped>
  .test-tree {
    width: 400px;
    overflow-y: auto;
  }
  h1 {
    font-size: 18px;
    padding: 10px 0;
  }
  h2 {
    font-size: 14px;
    padding: 10px 0;
  }
  p{
    padding: 10px 0;
  }
  code {
    background-color: #aaa;
  }
  pre {
    font-size: 14px;
  }
</style>
